<script lang="ts" setup>
import { PropType } from "vue";
declare type JustifyType  = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'inherit'| 'unset'
declare type AlignType  = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'normal' | 'inherit'| 'unset'
defineOptions({
  name: "app-space"
})
defineProps({
  justify:{
    type: String as PropType<JustifyType>, default: 'flex-start'
  },
  align:{
    type: String as PropType<AlignType>, default: 'center'
  }
})
</script>
<template>
  <div class="app-space"><slot /></div>
</template>



<style lang="scss" scoped>
.app-space{
  width: initial;
  height: inherit;
  display: flex;
  justify-content: v-bind(justify);
  align-items: v-bind(align);
}
</style>